<template>
  <h1>{{ msg }}的年龄为{{age}}</h1>
  <div>{{double}}</div>
  <button @click="add">点我+1</button>
  <content :msg="msg" :age="age" @showName="showName"></content>

  <div class="line"></div>

  <h1>{{ state.msg2 }}的年龄为{{state.age2}}</h1>
  <div>{{state.double2}}</div>
  <button @click="add2">点我+1</button>

  <div class="line"></div>

  <h1>{{ msg3 }}的年龄为{{age3}}</h1>
  <div>{{double3}}</div>
  <button @click="add3">点我+1</button>

</template>

<script>
import { ref, computed, reactive, toRefs, watch } from 'vue'
import content from "../components/content.vue";
export default {
  components: {
    content
  },
  setup() {
    const msg = ref('w王大和')
    const age = ref(18)
    const double = computed(() => {
       return age.value
    })
    function add() {
      age.value += 1
    }

    // watch(() => {
    //   console.log(msg.value + '--1-0--' + age.value)
    // })
    // watch(age, () => {
    //   console.log(msg.value + '--1-1--' + age.value)
    // })

    const state = reactive({
      msg2: '傻子',
      age2: 22,
      double2: computed(() => {
        return state.age2 * 2
      })
    })
    function add2() {
      state.age2 += 1
    }
    // watch(() => {
    //   console.log(state.msg2 + '--2-0--' + state.age2)
    // })
    watch(() => state.age2, (newVal, oldVal, clean) => {
      console.log('旧年龄是啥？=>' + oldVal + '新年龄是啥 => ' + newVal)
      clean(() => { console.log('clean')})
      // console.log(state.msg2 + '--2-1--' + state.age2)
    })

    const perObj = reactive({
      msg3: 'lisi',
      age3: 33,
      double3: computed(() => {
        return perObj.age3 * 3
      })
    })
    function add3() {
      perObj.age3 += 1
    }

    function showName(params) {
      alert(params)
    }

    return { msg, age, add, double, state, ...toRefs(perObj), add2, add3, showName}
  }
}

</script>

<style scoped>
a {
  color: #42b983;
}
.line{
  width: 100%;
  border-top: 1px dashed red;
  margin: 10px 0;
}
</style>
